<template>
    <div class="product-list-wrap">
        <el-table border  :data="productList" height="655">
            <!-- 渲染死数据 (直接对应属性名) -->
            <!-- <el-table-column label="商品id" prop="proid"></el-table-column> -->
            <el-table-column label="商品名称" prop="proname" width="220"></el-table-column>
            <el-table-column label="分类" prop="category" ></el-table-column>
            <el-table-column label="品牌" prop="brand" ></el-table-column>

            <!-- 用户根据自己需求渲染数据(作用域插槽)   v-slot="{row,column, $index}"-->
            <el-table-column label="商品图片" prop="img1"  >
                <template v-slot="{row}" >
                    <el-image 
                        class="show-img"
                        preview-teleported
                        style="width: 100px; height: 100px"
                        :src="row.img1"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="[row.img1,row.img2,row.img3,row.img4]"
                        :initial-index="0"
                        fit="cover"
                        />
                </template>
            </el-table-column>
            <el-table-column label="商品价格" prop="originprice"  >
                <template v-slot="{row}">
                    {{ (row.originprice*row.discount/10).toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="brand" ></el-table-column>
            <el-table-column label="销量" prop="sales" ></el-table-column>
            <el-table-column label="库存" prop="stock" ></el-table-column>
        </el-table>

        <!-- 
            :page-size="20" 不加v-model 只是父子通信, 子组件内数据改变,不会通知父组件
            v-model:page-size="pageParams.limitNum"  父子通信和子父通信  父传子 子通知父组件改数据

            :default-page-size="10"
            :default-current-page="2"

            v-model:page-size="pageParams.limitNum"
            v-model:current-page="pageParams.count"
         -->
        <el-pagination 
            v-model:page-size="pageParams.limitNum"
            v-model:current-page="pageParams.count"
            background 
            hide-on-single-page 
            layout="prev, pager,next,total,sizes,jumper" 
            :total="total"
            @change="changeHandler"
            :page-sizes="[5,10,20,50]"
            />
        <span>{{  pageParams}}</span>
    </div>
</template>

<script>
    import {getProductListAPI} from "@/api/product";
    import { ElMessage } from "element-plus";

    export default {
        name:"ProductListView",
        data(){
            return {
                activeIndex:null,
                productList:null,
                total:null,
                pageParams:{
                    count:1,
                    limitNum:5,
                }
            }
        },
        methods:{
            async getProductList(){
                try{
                    let result = await getProductListAPI(this.pageParams);
                    console.log("请求成功",result);
                    this.productList = result.data;
                    this.total = result.total;
                    console.log(1111,this.total);
                }catch(err){
                    ElMessage({
                        type: "error",
                        message: err.message,
                    })
                }
            },
            changeHandler(){
                this.getProductList();
            }
        },
        mounted(){
            
            this.getProductList();
        }
    }
</script>

<style lang="scss" scoped>
    .active{
        z-index: 999;
    }
</style>